<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j">

<body>
	<ui:composition template="/templates/template.xhtml">
		<ui:define name="title">RichFaces Sample</ui:define>
		<ui:define name="body">
			<table width="400">
				<tbody>
					<tr>
						<td><span onmouseover="updateName('Kate')"
							onmouseout="updateName('')">Kate</span></td>
						<td><span onmouseover="updateName('John')"
							onmouseout="updateName('')">John</span></td>
						<td><span onmouseover="updateName('Alex')"
							onmouseout="updateName('')">Alex</span></td>
					</tr>
					<tr>
						<td colspan="3">Name: <b> <h:outputText id="showname"
									value="#{functionBean.text}" />
						</b></td>
					</tr>
				</tbody>
			</table>
			<h:form>
				<a4j:jsFunction name="updateName" render="showname">
					<a4j:param name="name" assignTo="#{functionBean.text}" />
				</a4j:jsFunction>
			</h:form>
		</ui:define>
	</ui:composition>
</body>
</html>